<template>
  <div>
<!--    添加 头部信息-->
    <header class="header">
      <h1 class="title">自动刮粪机</h1>
    </header>

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="品牌" prop="fansBrand">
        <el-input
          v-model="queryParams.fansBrand"
          placeholder="请输入气体交换机品牌"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="型号" prop="fansType">
        <el-input
          v-model="queryParams.fansType"
          placeholder="请输入气体交换机型号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="栏舍编码" prop="phouseCode">
        <el-input
          v-model="queryParams.phouseCode"
          placeholder="请输入气体交换机所在栏舍编码"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
<!--    保留新增  去掉修改和删除-->

    <div class="button-group">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
<!--    去掉 列表形式 转换成盒子模块形式-->

    <div class="custom-table" v-loading="loading">

        <div class="table-body">
          <div v-for="(item, index) in purchaseList"
               :key="index"
               class="function-card"
               @contextmenu.prevent="$event.preventDefault(); showContextMenu($event, item)"
               @click="showDetails(item)"
          >
            <div class="function-icon" >
<!--              <img src="/src/assests/images/scrape.png" height="140"/>-->
              <svg t="1708317591977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4334" width="200" height="140"><path d="M604 803.2c-2.4-3.2-6.4-2.4-9.6-2.4h-48c-7.2 0-14.4 1.6-20.8 5.6-27.2 16.8-14.4-12.8-42.4 3.2-3.2 1.6-6.4 4-9.6 5.6-3.2 3.2-8 2.4-11.2-0.8-1.6-1.6-2.4-2.4-4-3.2-28-22.4-56-45.6-83.2-68-4.8-4-10.4-6.4-16.8-6.4H258.4c-4 0.8-8 0-12-2.4L197.6 488l-7.2-2.4c-11.2-1.6-22.4-3.2-33.6-5.6-20.8-3.2-42.4-6.4-63.2-10.4-3.2-0.8-6.4-2.4-8-5.6l-4.8-6.4c-17.6-24-35.2-232.8-52.8-256-1.6-1.6-2.4-5.6-6.4-4-0.8 150.4-0.8 576-0.8 727.2 0 2.4 0.8 4.8 0.8 7.2 5.6 0.8 11.2 0.8 16 0.8h600.8c1.6 0 3.2-0.8 5.6-1.6 1.6-9.6-38.4-116-40-128z m0 0" p-id="4335"></path><path d="M898.4 227.2c1.6-0.8 2.4-1.6 4-3.2-0.8-1.6-2.4-3.2-3.2-4.8L788 100c-1.6 1.6-3.2 2.4-4 4l-74.4 124.8c-0.8 1.6-1.6 3.2-1.6 4 4 6.4 11.2 9.6 14.4 17.6-1.6 2.4-3.2 4.8-5.6 7.2-60 68.8-200 224-209.6 232-2.4-0.8-4-2.4-6.4-4-12-10.4-23.2-20.8-35.2-32l-8.8-8-4.8 2.4c-31.2 24.8-57.6 55.2-79.2 88-12 17.6-20 37.6-24.8 58.4-8 39.2 9.6 79.2 43.2 100 18.4 11.2 40.8 13.6 60.8 5.6 12.8-4.8 24.8-10.4 35.2-18.4 14.4-10.4 28.8-23.2 40.8-36.8 18.4-19.2 34.4-40.8 49.6-63.2 2.4-3.2 4-6.4 6.4-10.4-12.8-18.4-26.4-35.2-38.4-52.8 2.4-3.2 4-5.6 5.6-8 66.4-77.6 192.8-224 200.8-231.2 7.2 3.2 11.2 12 19.2 15.2l127.2-67.2z m-60-27.2c1.6 2.4 3.2 4 4.8 6.4-1.6 1.6-3.2 2.4-4.8 4l-17.6 9.6-25.6 12c-3.2 1.6-7.2 1.6-9.6-1.6-4-4-9.6-8.8-12-11.2-3.2-2.4-6.4-4.8-8-8.8 9.6-17.6 20-33.6 32-49.6 14.4 11.2 28 24 40.8 39.2z m0 0M729.6 809.6c4.8-4 12.8-8 22.4-11.2 14.4-4.8 32.8-8 52.8-9.6l-5.6-8.8c-24.8 1.6-48 5.6-66.4 12-18.4 6.4-30.4 13.6-35.2 22.4l26.4 1.6c0.8-2.4 3.2-4.8 5.6-6.4z m22.4 37.6c-14.4-4.8-24-11.2-28-17.6l-26.4 1.6c4.8 8.8 17.6 16 35.2 22.4 18.4 6.4 40.8 10.4 66.4 12l4.8-8.8c-19.2-0.8-37.6-4.8-52-9.6z m164-55.2c-18.4-6.4-40.8-10.4-66.4-12l-5.6 8.8c20 1.6 38.4 4.8 52.8 9.6 14.4 4.8 24 11.2 28 17.6l26.4-1.6c-1.6-3.2-4-5.6-7.2-8-6.4-5.6-16-10.4-28-14.4z m3.2 44c-4.8 4-12.8 8-22.4 11.2-14.4 4.8-32.8 8-52.8 9.6l4.8 8.8c8-0.8 16.8-1.6 24-2.4 16-2.4 29.6-5.6 41.6-9.6 18.4-6.4 30.4-13.6 35.2-22.4l-26.4-1.6c0.8 2.4-1.6 4.8-4 6.4z m-23.2-13.6c0-13.6-32-24-71.2-24s-71.2 11.2-71.2 24c0 13.6 32 24 71.2 24 39.2 0.8 71.2-10.4 71.2-24z m-71.2 15.2c-24.8 0-44.8-7.2-44.8-15.2 0-8 20-15.2 44.8-15.2 24.8 0 44.8 7.2 44.8 15.2-0.8 8.8-20.8 15.2-44.8 15.2z m0 0" p-id="4336"></path><path d="M1012 823.2c0-36-84-64.8-187.2-64.8-103.2 0-187.2 28.8-187.2 64v0.8c2.4 34.4 85.6 62.4 187.2 62.4 101.6 0.8 184.8-27.2 187.2-62.4 0 0.8 0 0.8 0 0 0 0.8 0 0.8 0 0z m-171.2 53.6v-3.2c0-2.4-5.6-4.8-13.6-4.8-7.2 0-13.6 2.4-13.6 4.8v3.2c-78.4-1.6-141.6-22.4-149.6-48.8h8.8c7.2 0 13.6-2.4 13.6-4.8s-5.6-4.8-13.6-4.8H664c5.6-27.2 69.6-48.8 149.6-51.2v3.2c0 2.4 5.6 4.8 13.6 4.8 7.2 0 13.6-2.4 13.6-4.8v-3.2c77.6 2.4 138.4 24 144 50.4h-9.6c-7.2 0-13.6 2.4-13.6 4.8s5.6 4.8 13.6 4.8h8.8c-7.2 27.2-67.2 47.2-143.2 49.6z m0 0" p-id="4337"></path></svg>
            </div>

            <div class="table-header">
              <el-col class="header-item" style="flex: 1; text-align: center;">设备型号</el-col>
              <el-col class="header-item" style="flex: 1; text-align: center;">设备品牌</el-col>
              <el-col class="header-item" style="flex: 1; text-align: center;">栏舍编码</el-col>
            </div>
            <div class="table-header">
              <el-col class="row-item" style="flex: 1; text-align: center;">{{ item.fansType }}</el-col>
              <el-col class="row-item" style="flex: 1; text-align: center;">{{ item.fansBrand }}</el-col>
              <el-col class="row-item" style="flex: 1; text-align: center;">{{ item.phouseCode }}</el-col>
              <el-col style="display: none">{{ item.fansId }}</el-col>
            </div>
          </div>
        </div>

<!--      保留编辑和删除-->
      <div
        v-if="contextMenuVisible"
        class="context-menu"
        :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
      >
        <ul>
          <li @click="handleUpdate">编辑</li>
          <li @click="handleDelete">删除</li>
        </ul>
      </div>
    </div>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 添加或修改-->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌" prop="fansBrand">
              <el-input v-model="form.fansBrand" placeholder="请输入品牌"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="fansType">
              <el-input v-model="form.fansType" placeholder="请输入型号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材质" prop="fansMaterial">
              <el-input v-model="form.fansMaterial" placeholder="请输入材质"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="fansProduction">
              <el-date-picker
                v-model="form.fansProduction"
                placeholder="请选择生产日期"
                style="width: 280px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="风机压力" prop="fansPressure">
              <el-select
                v-model="form.fansPressure"
                placeholder="请选择风机压力"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_fans_pressure"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栏舍类型" prop="phouseType">
              <el-select
                v-model="form.phouseType"
                placeholder="请选择栏舍类型"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_park_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="fansState">
              <el-select
                v-model="form.fansState"
                placeholder="请选择状态"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in dict.type.hmy_fans_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栏舍编码" prop="phouseCode">
              <el-input v-model="form.phouseCode"  placeholder="请输入栏舍编码"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="风速" prop="fansVelocity">
              <el-input v-model="form.fansVelocity" type="number" placeholder="风速(m/s)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重量" prop="fansWeight">
              <el-input v-model="form.fansWeight" type="number" placeholder="重量(kg)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作电压" prop="fansVoltage">
              <el-input v-model="form.fansVoltage" placeholder="请输入电压(单位v)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格" prop="fansPrice">
              <el-input v-model="form.fansPrice" placeholder="请输入价格(单位元)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="维修记录">
          <el-input v-model="form.fansRepair" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="故障记录">
          <el-input v-model="form.fansFault" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>



</template>

<script>

import {list,selectbyid,add,del,edit} from "@/api/hmy/fans";


export default {
  name: "Purchase",
  dicts: ['hmy_fans_pressure', 'hmy_park_type','hmy_fans_state'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 进货表格数据
      purchaseList: [],
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      selectedContextItem: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        fansBrand: "",
        fansType: "",
        phouseCode: ""


      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        fansType: [
          {required: true, message: "编号不能为空", trigger: "blur"},
          {validator:async (rule, value, callback) => {
              var fansType = this.form.fansType;
              if (fansType != undefined ){
                await selectbyid(fansType).then(response => {
                  if(response.data!=null){
                    callback(new Error("已存在"))
                  }
                })
              }
            }, trigger: 'blur'
          }
        ],
        fansBrand: [
          {required: true, message: "材质不能为空", trigger: "blur"}
        ],
        fansMaterial: [
          {required: true, message: "生产日期不能为空", trigger: "blur"}
        ],
        phouseType: [
          {required: true, message: "栏舍类型不能为空", trigger: "blur"}
        ],
        phouseCode:[
          {required: true, message: "故障记录不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
          this.purchaseList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    showContextMenu(event, item) {
      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      this.selectedContextItem = item;
      this.contextMenuVisible = true;
    },
    hideContextMenu() {
      this.contextMenuVisible = false;
    },
    showDetails(item) {
      selectbyid(item.fansType).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看气体交换机信息";
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        fansId: undefined,
        fansBrand: undefined,
        fansType: undefined,
        fansMaterial: undefined,
        fansPressure: undefined,
        fansWeight: undefined,
        fansVelocity: undefined,
        fansProduction: undefined,
        fansRepair: undefined,
        fansState: undefined,
        fansPrice: undefined,
        fansVoltage: undefined,
        phouseType: undefined,
        phouseCode: undefined,

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      //this.resetForm("queryForm");
      this.queryParams = {};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.fansId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    //添加按钮
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加进货信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const item = this.selectedContextItem;
      selectbyid(item.fansType).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改气体交换机信息";
      });
      this.hideContextMenu();
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.fansId != undefined) {

            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const item = this.selectedContextItem;
      this.$modal.confirm('是否确认删除设备型号为"' + item.fansType + '"的数据项？').then(function () {
        return del(item.fansType);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
      this.hideContextMenu();
    },

  }
};
</script>

<!--添加样式-->
<style scoped>
.header {
  background-color: #3498db; /* 浅蓝色 */
  color: #fff;
  text-align: center;
  padding: 40px 20px;
}
/* 标题*/
.title {
  font-size: 36px;
  margin-bottom: 10px;
}
/* card*/
.function-card {
  width: 280px;
  height: 200px;
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}
.function-card:hover {
  transform: scale(1.05);
}

.function-icon {
  height: 140px;
  background-color: #1cbbb4; /* 金黄色 */
}
/* h3 标题样式*/
h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #1cbbb4; /* 深灰色 */
}
/* 段落样式*/
p {
  color: #777;
}
/*表格*/
.custom-table {
  border: 1px solid #ccc;
  width: 100%; /* 控制表格宽度 */
}
/**/
.table-header, .table-body {
  display: flex;
  flex-wrap: wrap;
}

.header-item, .row-item {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.table-header .header-item, .table-body .row-item {
  text-align: center;
}

.table-header .header-item:nth-child(odd), .table-body .row-item:nth-child(odd) {
  background-color: #f2f2f2; /* 奇数行背景色 */
}
.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}
</style>
